<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="apple-touch-icon" sizes="180x180" href="./image/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./image/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./image/favicon-16x16.png">
    <link rel="stylesheet" href="./style.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Forum&family=Inter:wght@100;200;300;400;500;600;700&display=swap"
        rel="stylesheet">
    <title>Library</title>
</head>

<body>
    <header class="header">
        <div class="container">
            <div class="header-content">
                <h1 class="header-title">Brooklyn Public Library</h1>
                <div class="navigation">
                    <nav>
                        <ul id="navigation"  class="navigation-block">
                            <li class="navigation-block__item nav"><a href="#about" class="nav__item">About</a></li>
                            <li class="navigation-block__item nav"><a href="#favorites" class="nav__item">Favorites</a></li>
                            <li class="navigation-block__item nav"><a href="#coffee" class="nav__item">Coffee shop</a></li>
                            <li class="navigation-block__item nav"><a href="#contact" class="nav__item">Contacts</a></li>
                            <li class="navigation-block__item nav"><a href="#digital" class="nav__item">Library Card</a>
                            </li>
                        </ul>
                    </nav>                    
                    <img class="header-content__icon" src="./image/icon_profile.svg" alt="Иконка профиля">
                    <div class="menu-burger" id="burger">
                            <span class="menu-burger__line"></span>
                            <span class="menu-burger__line"></span>
                            <span class="menu-burger__line"></span>
                    </div>
                    <div class="popup" id="popup"></div>
                </div>
            </div>
        </div>
    </header>
    <main class="main">
        <section class="welcome" id="welcome">
            <div class="welcome-container">
                <div class="welcome-title">
                    <h2 class="welcome-title__text text-welcome"><span class="text-welcome__item">WELCOME</span> TO THE
                        BROOKLYN LIBRARY</h2>
                </div>
            </div>
        </section>
        <section class="about" id="about">
            <div class="container">
                <h2 class="block-title">About</h2>
                <div class="about-description">
                    <span class="about-description__text">The Brooklyn Library is a free workspace, a large number of
                        books and a cozy coffee shop inside</span>
                </div>
                <div class="about-content">
                    <div class="arrow-left">
                        <span id="arrow-back" class="arrow-back" onclick="backSlide()"></span>
                    </div>  
                    <div id="card1" class="about-content__card">
                        <img id="about-img" src="./image/image1.png" alt="Card image" class="card__photo">
                    </div>                    
                    <div id="card2" class="about-content__card">
                        <img id="about-img2" src="./image/image2.png" alt="Card image" class="card__photo">
                    </div>
                    <div id="card3" class="about-content__card">
                        <img id="about-img3" src="./image/image3.png" alt="Card image" class="card__photo">
                    </div>
                    <div id="card4" class="about-content__card">
                        <img id="about-img4" src="./image/image4.png" alt="Card image" class="card__photo">
                    </div>
                    <div id="card5" class="about-content__card">
                        <img id="about-img5" src="./image/image5.png" alt="Card image" class="card__photo">
                    </div>
                    <div class="arrow-right">
                        <span id="arrow-forward" class="arrow-forward" onclick="forwardSlide()"></span>
                    </div>
                </div>
                <div class="about-points">
                    <div class="point-block" onclick="goSlide(1)">
                        <div id="point1" class="point-block__item"></div>
                    </div>
                    <div class="point-block" onclick="goSlide(2)">
                        <div id="point2" class="point-block__item"></div>
                    </div>
                    <div class="point-block" onclick="goSlide(3)">
                        <div id="point3" class="point-block__item"></div>
                    </div>
                    <div id="point4" class="point-block" onclick="goSlide(4)">
                        <div class="point-block__item"></div>
                    </div>
                    <div id="point5" class="point-block" onclick="goSlide(5)">
                        <div class="point-block__item"></div>
                    </div>
                </div>
            </div>
        </section>
        <section class="favorites" id="favorites">
            <div class="container">
                <h2 class="block-title">Favorites</h2>
                <div class="favorites-menu">
                    <span class="favorites-menu__title">Pick favorites of season</span>
                    <div id="checkbox" class="favorites-menu_checkbox checkbox">
                        <div class="checkbox-season">
                            <input type="radio" id="winter" name="checkbox" value="winter" class="checkbox__item" checked>
                            <label for="winter" class="checkbox-label">Winter</label>
                        </div>
                        <div class="checkbox-season">
                            <input type="radio" id="spring" name="checkbox" value="spring" class="checkbox__item">
                            <label for="spring" class="checkbox-label">Spring</label>
                        </div>
                        <div class="checkbox-season">
                            <input type="radio" id="summer" name="checkbox" value="summer" class="checkbox__item">
                            <label for="summer" class="checkbox-label">Summer</label>
                        </div>
                        <div class="checkbox-season">
                            <input type="radio" id="autumn" name="checkbox" value="autumn" class="checkbox__item">
                            <label for="autumn" class="checkbox-label">Autumn</label>
                        </div>       
                        
                    </div>
                </div>
                <div id="wintercard" class="favorites-card">
                    <div class="card-container">
                        <div class="favorites-card__item card">
                            <h5 class="card-title">Staff Picks</h5>
                            <span class="card-bookname">The Book Eaters</span>
                            <span class="card-author">By Sunyi Dean</span>
                            <p class="card-description">An unusual sci-fi story about a book eater woman who tries
                                desperately to save her dangerous mind-eater son from tradition and certain death. Complete
                                with dysfunctional family values, light Sapphic romance, and a strong, complex protagonist.
                                Not for the faint of heart.</p>
                            <img src="./image/book-3.png" alt="" class="card-img">
                            <button class="card-button">Buy</button>
                        </div>
                    </div>
                    <div class="card-container">
                        <div class="favorites-card__item card">
                            <h5 class="card-title">Staff Picks</h5>
                            <span class="card-bookname">Cackle</span>
                            <span class="card-author">By Rachel Harrison</span>
                            <p class="card-description">Are your Halloween movies of choice The Witches of Eastwick and
                                Practical Magic? Look no further than here - where a woman recovering from a breakup moves
                                to a quaint town in upstate New York and befriends a beautiful witch.</p>
                            <img src="./image/book-2.png" alt="" class="card-img">
                            <button class="card-button">Buy</button>
                        </div>
                    </div>
                    <div class="card-container">
                        <div class="favorites-card__item card">
                            <h5 class="card-title">Staff Picks</h5>
                            <span class="card-bookname">Dante: Poet of the Secular World</span>
                            <span class="card-author">By Erich Auerbach</span>
                            <p class="card-description">Auerbach's engaging book places the 'Comedy' within the tradition of
                                epic, tragedy, and philosophy in general, arguing for Dante's uniqueness as one who raised
                                the individual and his drama of soul into something of divine significance—an inspired
                                introduction to Dante's main themes.</p>
                            <img src="./image/book-1.png" alt="" class="card-img">
                            <button class="card-button">Buy</button>
                        </div>
                    </div>
                    <div class="card-container">
                        <div class="favorites-card__item card">
                            <h5 class="card-title">Staff Picks</h5>
                            <span class="card-bookname">The Last Queen</span>
                            <span class="card-author">By Clive Irving</span>
                            <p class="card-description">A timely and revelatory new biography of Queen Elizabeth (and her
                                family) exploring how the Windsors have evolved and thrived as the modern world has changed
                                around them.</p>
                            <img src="./image/book.png" alt="" class="card-img">
                            <button class="card-button__active" disabled>Own</button>
                        </div>
                    </div>                
                </div>
                <div id="springcard" class="favorites-card">
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">The Body</span>
                        <span class="card-author">By Stephen King</span>
                        <p class="card-description">Powerful novel that takes you back to a nostalgic time, exploring
                            both the beauty and danger and loss of innocence that is youth.</p>
                        <img src="./image/springbook.png" alt="" class="card-img">
                        <button class="card-button">Buy</button>
                    </div>
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">Carry: A Memoir of Survival on Stolen Land</span>
                        <span class="card-author">By Toni Jenson</span>
                        <p class="card-description">This memoir about the author's relationship with gun violence feels
                            both expansive and intimate, resulting in a lyrical indictment of the way things are.</p>
                        <img src="./image/springbook2.png" alt="" class="card-img">
                        <button class="card-button">Buy</button>
                    </div>
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">Days of Distraction</span>
                        <span class="card-author">By Alexandra Chang</span>
                        <p class="card-description">A sardonic view of Silicon Valley culture, a meditation on race, and
                            a journal of displacement and belonging, all in one form-defying package of spare prose.</p>
                        <img src="./image/springbook3.png" alt="" class="card-img">
                        <button class="card-button">Buy</button>
                    </div>
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">Dominicana</span>
                        <span class="card-author">By Angie Cruz</span>
                        <p class="card-description">A fascinating story of a teenage girl who marries a man twice her
                            age with the promise to bring her to America. Her marriage is an opportunity for her family
                            to eventually immigrate. For fans of Isabel Allende and Julia Alvarez.</p>
                        <img src="./image/springbook4.png" alt="" class="card-img">
                        <button class="card-button__active" disabled>Own</button>
                    </div>
                </div>
                <div id="summercard" class="favorites-card">
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">Crude: A Memoir</span>
                        <span class="card-author">By Pablo Fajardo & ​​Sophie Tardy-Joubert</span>
                        <p class="card-description">Drawing and color by Damien Roudeau | This book illustrates the
                            struggles of a group of indigenous Ecuadoreans as they try to sue the ChevronTexaco company
                            for damage their oil fields did to the Amazon and her people</p>
                        <img src="./image/summerbook3.png" alt="" class="card-img">
                        <button class="card-button">Buy</button>
                    </div>
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">Let My People Go Surfing</span>
                        <span class="card-author">By Yvon Chouinard</span>
                        <p class="card-description">Chouinard—climber, businessman, environmentalist—shares tales of
                            courage and persistence from his experience of founding and leading Patagonia, Inc. Full
                            title: Let My People Go Surfing: The Education of a Reluctant Businessman, Including 10 More
                            Years of Business Unusual.</p>
                        <img src="./image/summerbook2.png" alt="" class="card-img">
                        <button class="card-button">Buy</button>
                    </div>
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">The Octopus Museum: Poems</span>
                        <span class="card-author">By Brenda Shaughnessy</span>
                        <p class="card-description">This collection of bold and scathingly beautiful feminist poems
                            imagines what comes after our current age of environmental destruction, racism, sexism, and
                            divisive politics.</p>
                        <img src="./image/summerbook1.png" alt="" class="card-img">
                        <button class="card-button">Buy</button>
                    </div>
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">Shark Dialogues: A Novel</span>
                        <span class="card-author">By Kiana Davenport</span>
                        <p class="card-description">An epic saga of seven generations of one family encompasses the
                            tumultuous history of Hawaii as a Hawaiian woman gathers her four granddaughters together in
                            an erotic tale of villains and dreamers, queens and revolutionaries, lepers and healers.</p>
                        <img src="./image/summerbook.png" alt="" class="card-img">
                        <button class="card-button__active" disabled>Own</button>
                    </div>
                </div>
                <div id="autumncard" class="favorites-card">
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">Casual Conversation</span>
                        <span class="card-author">By Renia White</span>
                        <p class="card-description">White's impressive debut collection takes readers through and beyond
                            the concepts of conversation and the casual - both what we say to each other and what we
                            don't, examining the possibilities around how we construct and communicate identity.</p>
                        <img src="./image/autumnbook4.png" alt="" class="card-img">
                        <button class="card-button">Buy</button>
                    </div>
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">The Great Fire</span>
                        <span class="card-author">By Lou Ureneck</span>
                        <p class="card-description">The harrowing story of an ordinary American and a principled Naval
                            officer who, horrified by the burning of Smyrna, led an extraordinary rescue effort that
                            saved a quarter of a million refugees from the Armenian Genocide</p>
                        <img src="./image/autumnbook3.png" alt="" class="card-img">
                        <button class="card-button">Buy</button>
                    </div>
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">Rickey: The Life and Legend</span>
                        <span class="card-author">By Howard Bryant</span>
                        <p class="card-description">With the fall rolling around, one can't help but think of baseball's
                            postseason coming up! And what better way to prepare for it than reading the biography of
                            one of the game's all-time greatest performers, the Man of Steal, Rickey Henderson?</p>
                        <img src="./image/autumnbook2.png" alt="" class="card-img">
                        <button class="card-button">Buy</button>
                    </div>
                    <div class="favorites-card__item card">
                        <h5 class="card-title">Staff Picks</h5>
                        <span class="card-bookname">Slug: And Other Stories</span>
                        <span class="card-author">By Megan Milks</span>
                        <p class="card-description">Exes Tegan and Sara find themselves chained together by hairballs of
                            codependency. A father and child experience the shared trauma of giving birth to gods from
                            their wounds.</p>
                        <img src="./image/autumnbook.png" alt="" class="card-img">
                        <button class="card-button__active" disabled>Own</button>
                    </div>
                </div>
            </div>
        </section>
        <section class="coffee" id="coffee">
            <div class="container">
                <h2 class="block-title">Coffee Shop</h2>
                <p class="coffee-description">In our library, we have of cozy coffee shop, welcoming in customers with
                    frothy cappuccinos and friendly conversation.
                    You can get a favorite book and read in coffee shop. Our barista to cook you best coffee, and also
                    you can try desserts from bakery.</p>
                <div class="coffee-menu menu">
                    <div class="menu-block element">
                        <h5 class="menu-block__title">Coffee & Tea</h5>
                        <div class="element-block">
                            <div class="element-block__title">Cold Brew Coffee</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$3</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">French Press Pot</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$5</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">Espresso</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$2</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">Cappuccino</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$4</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">Hot tea</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$2</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">Cold tea</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$2</div>
                        </div>
                    </div>
                    <div class="menu-block element right">
                        <h5 class="menu-block__title">Desserts & Cakes</h5>
                        <div class="element-block">
                            <div class="element-block__title">Forest Gateau</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$16</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">Blue Moon</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$16</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">Truffle Cake</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$15</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">Chocolate Cake</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$18</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">Poet’s Dream Cake</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$16</div>
                        </div>
                        <div class="element-block">
                            <div class="element-block__title">Pineapple Cake</div>
                            <div class="element-block__line"></div>
                            <div class="element-block__price">$14</div>
                        </div>

                    </div>

                </div>
            </div>
        </section>
        <section class="contact" id="contact">
            <div class="container">
                <h2 class="block-title">Our Contacts</h2>
                <div class="contact-content">
                    <div class="contact-left">
                        <div class="contact-left__adress adress">
                            <span class="adress-title">For All Library inquiries:</span>
                            <span class="adress-text">Please call <a class="adress-text__tel"
                                    href="tel:+1212(617)730-2370">(617) 730-2370</a></span>
                            <span class="adress-text">For TTY service, please call <a class="adress-text__tel"
                                    href="tel:+1212(617)730-2370">(617) 730-2370</a></span>
                            <span class="adress-text">Putterham Library: <a class="adress-text__tel"
                                    href="tel:+1212(617)730-2385">(617) 730-2385</a></span>
                        </div>
                        <div class="contact-left__director director">
                            <span class="director-title">Senior Staff</span>
                            <span class="director-text">Library Director: <a href="mailto:amandahirst@gmail.com"
                                    class="director-text_bold"> Amanda
                                    Hirst</a></span>
                        </div>
                    </div>
                    <div class="contact-right">
                        <img src="./image/map.png" alt="map" class="contact-right__map">
                    </div>
                </div>
            </div>
        </section>
        <section class="digital" id="digital">
            <div class="container">
                <h2 class="block-title">Digital Library Cards</h2>
                <div class="digital-content">
                    <div class="digital-left">
                        <span class="digital-left__title">Find your Library card</span>
                        <form class="digital-left__form feedback">
                            <div class="feedback-input">
                                <span class="feedback-input__title">Brooklyn Public Library</span>
                                <input type="text" class="feedback-input__item" placeholder="Reader's name">
                                <input type="text" class="feedback-input__item" placeholder="Card number">
                            </div>
                            <button class="feedback-input__btn">Check the card</button>
                        </form>
                    </div>
                    <div class="digital-right">
                        <span class="digital-right__title">Get a reader card</span>
                        <p class="digital-right__text">You will be able to see a reader card after logging into account
                            or you can register a new account</p>
                        <div class="digital-right_btn">
                            <button class="digital-btn">Sign Up</button>
                            <button class="digital-btn">Log in</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer class="footer">
        <div class="container">
            <div class="footer-up up">
                <div class="up-left">
                    <a href="https://goo.gl/maps/9jntFyyickc7zKQF8" class="up-left__adress">286 Cadman Plaza, New York,
                        NY 11238, United States</a>
                    <ul class="up-left_soc soc">
                        <li class="soc-icon"><a
                                href="https://hca.twimg.com/ru/using-twitter/create-twitter-account"><img
                                    src="./image/twit.svg" alt="twitter" class="soc-icon__img"></a></li>
                        <li class="soc-icon"><a href="http://instagram.com/"><img src="./image/inst.svg" alt="instagram"
                                    class="soc-icon__img"></a></li>
                        <li class="soc-icon"><a href="http://facebook.com/"><img src="./image/fb.svg" alt="facebook"
                                    class="soc-icon__img"></a></li>
                    </ul>
                </div>
                <div class="up-right">
                    <p class="up-right_weekday"><span class="weekday">Mon - Fri</span>08:00 am - 07:00 pm</p>
                    <p class="up-right_weekend"><span class="weekday">Sat - Sun</span>10:00 am - 06:00 pm</p>
                </div>
            </div>
            <div class="footer-line"></div>
            <div class="footer-down">
                <span class="footer-down__text">2023</span>
                <a href="https://rs.school/js-stage0/" class="footer-down__school">The Rolling Scopes School</a>
                <a href="https://github.com/miramkuanyshev" class="footer-down__text">Miram Kuanyshev</a>
            </div>
        </div>
    </footer>
    <script src="./script.js"></script>
</body>

</html>